<template>
    <div>
<!--        菜单列表查询框-->
        <el-form v-model="queryParams">
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">菜单名称</span>
            <el-input
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请输入菜单名称"
                    v-model="queryParams.menuName">
            </el-input>
            <span style="font-weight: 700 ; font-size: 15px ;margin-right: 10px;color: #606266">状态</span>
            <el-select v-model="queryParams.status"
                    style="display: inline-block;width: 150px;margin-right: 20px;margin-bottom: 10px"
                    size="mini"
                    placeholder="请选择菜单状态">
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>
            <el-button type="primary" class="el-icon-search" size="mini" @click="seachMenus()">查询</el-button>
            <el-button type="info" class="el-icon-refresh" size="mini" @click="cleanSearch()" plain>清空</el-button>
        </el-form>

        <el-row style="display: inline-block; margin-right: 15px">
            <el-button type="primary" class="el-icon-plus" size="mini" @click="handleAdd" plain>新增</el-button>
        </el-row>
        <el-row style="display: inline-block; margin-right: 15px;">
            <el-button type="info" class="el-icon-sort" size="mini" @click="handleOpen()" plain>展开/折叠</el-button>
        </el-row>

<!--        新增菜单弹框-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px" append-to-body>
        <el-form :model="form" :rules="rules" ref="form" size="small" label-width="100px" class="demo-ruleForm">
            <el-form-item label="上级菜单" prop="parentId">
                <treeselect
                        v-model="form.parentId"
                        :options="menus"
                        :normalizer="normalizer"
                        :show-count="true"
                        placeholder="选择上级菜单"
                />
            </el-form-item>
            <el-form-item label="菜单类型" prop="menuType">
                <el-radio-group v-model="form.menuType">
                    <el-radio label="M">目录</el-radio>
                    <el-radio label="C">菜单</el-radio>
                    <el-radio label="F">按钮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item
                    v-if="form.menuType != 'F'"
                    label="菜单图标" prop="icon">
                <e-icon-picker v-model="form.icon"/>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" style="display: inline-block">
                <el-input v-model="form.menuName" placeholder="请输入菜单名称" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item label="显示排序" prop="orderNum" style="display: inline-block">
                <el-input-number v-model="form.orderNum" controls-position="right" :min="1" style="width: 180px"></el-input-number>
            </el-form-item>
            <el-form-item
                    v-if="form.menuType != 'F'"
                    label="路由地址" prop="path" style="display: inline-block">
                <el-input v-model="form.path" placeholder="请输入路由地址" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item
                    v-if="form.menuType != 'F'"
                    label="是否外链" prop="isFrame" style="display: inline-block">
                <el-radio v-model="form.isFrame" label="0">是</el-radio>
                <el-radio v-model="form.isFrame" label="1">否</el-radio>
            </el-form-item>

            <el-form-item
                    v-if="form.menuType == 'C'"
                    label="组件路径" prop="component" style="display: inline-block">
                <el-input v-model="form.component" placeholder="请输入组件路径" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item
                    v-if="form.menuType != 'M'"
                    label="权限字符" prop="perms" style="display: inline-block">
                <el-input v-model="form.perms" placeholder="请输入权限标识" style="width: 180px"></el-input>
            </el-form-item>
            <el-form-item
                    v-if="form.menuType == 'C'"
                    label="是否缓存" prop="isCache" style="display: inline-block">
                <el-radio v-model="form.isCache" label="0">缓存</el-radio>
                <el-radio v-model="form.isCache" label="1">不缓存</el-radio>
            </el-form-item>
<!--            <el-form-item-->
<!--                    v-if="form.menuType != 'F'"-->
<!--                    label="显示状态" prop="visible" style="display: inline-block">-->
<!--                <el-radio v-model="form.visible" label="0">显示</el-radio>-->
<!--                <el-radio v-model="form.visible" label="1">隐藏</el-radio>-->
<!--            </el-form-item>-->
            <el-form-item
                    v-if="form.menuType != 'F'"
                    label="菜单状态" prop="status" style="display: inline-block">
                <el-radio v-model="form.status" label="0">正常</el-radio>
                <el-radio v-model="form.status" label="1">停用</el-radio>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="saveMenus('form')">保存</el-button>
                <el-button @click="reset()">重置</el-button>
                <el-button @click="cancel()">关闭</el-button>
            </el-form-item>
        </el-form>
        </el-dialog>
<!--        菜单列表-->
        <el-table
                :data="menus"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%;margin-bottom: 5px;font-size: 13px;margin-top: 10px"
                row-key="menuId"

                v-if="refreshTable"
                :default-expand-all="expands"
                :tree-props="{children: 'menus'}"
                :row-style="{height:'15px'}"
                :cell-style="{padding:'5px'}"
                :header-cell-style="{background:'#EBEEF5',color:'#606266'}">
            <el-table-column
                    prop="menuName"
                    label="菜单名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="图标"
                    width="50">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="orderNum"
                    label="排序"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="perms"
                    label="权限标识"
                    width="150"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    prop="component"
                    label="组件路径"
                    width="180"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="100">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status==0" type="success">正常</el-tag>
                    <el-tag v-if="scope.row.status==1" type="info">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
                    sortable
                    width="180"
                    :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
                    label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning" plain
                            @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleAdd(scope.row)">新增</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default {

        name: "Menu",
        components:{ Treeselect},
        data() {
            return {
                title:"",   //弹出框标题
                menus: [],
                currentRow: null,   //高亮显示行数
                refreshTable: true,   //是否重新渲染表格
                expands: false,     //是否展开

                queryParams:{
                    status: '',       //搜索框菜单状态
                    menuName: '',     //搜索框菜单名称
                },

                form: {
                    menuId: "",
                    parentId: 0,
                    menuName: "",
                    icon: "",
                    menuType: "M",
                    orderNum: undefined,
                    isFrame: 0,
                    isCache: 0,
                    visible: "0",
                    status: "0",
                    perms: ""
                },     //表单参数

                //表单校验项
                rules: {
                    menuName: [
                        { required: true, message: '请输入菜单名称', trigger: 'blur' },
                        { max: 8, message: '菜单名称不能超过 8 个字符', trigger: 'blur' }
                    ],
                    orderNum: [
                        { required: true, message: '请选择菜单显示顺序', trigger: 'blur' }
                    ],
                    path: [
                        { required: true, message: '请输入路由地址', trigger: 'blur' }
                    ]

                },

                dialogFormVisible: false    //新增弹框是否显示
            }
        },
        methods:{
            //加载表格数据
            showMenus(){
                this.axios.get("http://localhost:8080/getMenusByTerm")
                    .then(res => {
                        if(res.data.data){
                            this.menus = res.data.data;
                        }
                    });
            },

            //查询菜单列表数据
            seachMenus(){
                this.axios.get("http://localhost:8080/getMenusByTerm",
                    {
                        params : {
                            status : this.queryParams.status,
                            menuName : this.queryParams.menuName
                        }
                    }).then(res => {
                    console.log(res)
                        this.menus = res.data.data;
                    })
            },

            //控制列表数据展开和关闭
            handleOpen() { //展开
                if (this.expands==false){
                    this.refreshTable = false;
                    this.expands = true;

                }else {
                    this.refreshTable = false;
                    this.expands = false;
                }
                this.$nextTick(() => {
                    this.refreshTable = true;
                });
            },
            //控制新增表单显示
            handleAdd(row){
                console.log(row);
                if (row.menuType=='F'){
                    this.$message.error("按钮不能进行新增操作")
                }else {
                    this.reset();
                    this.form.parentId = row.menuId;
                    this.dialogFormVisible = true;
                    this.title = "添加菜单";
                    this.$refs.form.clearValidate();
                }
            },

            //控制点击修改按钮后数据回显
            handleUpdate(row){
                this.form = {
                    menuId: row.menuId,
                    parentId: row.parentId,
                    menuName: row.menuName,
                    icon: row.icon,
                    path:row.path,
                    menuType: row.menuType,
                    orderNum: row.orderNum,
                    isFrame: row.isFrame,
                    isCache: row.isCache,
                    visible: row.visible,
                    status: row.status,
                    perms: row.perms
                };
                this.dialogFormVisible = true;
                this.title = this.form.menuType=='M'?"修改目录":this.form.menuType=='C'?'修改菜单':this.form.menuType=='F'?'修改按钮':"";
                this.$refs.form.clearValidate();
            },

            //保存菜单
            saveMenus(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        //菜单id为空为新增
                        if (this.form.menuId == ""){
                            this.axios.post("http://localhost:8080/addMenus",this.form)
                                .then(res => {
                                    console.log(res.data.data);
                                    if (res.data.data == "add"){
                                        this.$message.success("添加菜单成功！");
                                        this.dialogFormVisible = false;
                                        this.reset();
                                        this.showMenus();
                                    }else {
                                        this.$message.error("添加菜单失败!");
                                    }
                                })
                        } else {
                            //否则为修改
                            this.axios.put("http://localhost:8080/updateMenus",this.form)
                                .then(res => {
                                    console.log(res.data.data);
                                    if (res.data.data == "update") {
                                        this.$message.success("修改菜单成功!");
                                        this.dialogFormVisible = false;
                                        this.reset();
                                        this.showMenus();
                                    } else {
                                        this.$message.error("修改菜单失败!");
                                    }
                                })
                        }
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },

            //删除菜单
            handleDelete(row){
                if(confirm("是否确定删除？")){
                    this.axios.delete("http://localhost:8080/deleteMenus/" + row.menuId)
                        .then(res => {
                            if(res.data.data == "delete"){
                                this.$message.success("删除成功!");
                                this.showMenus();
                            }
                        });
                }

            },

            // 转换菜单数据结构
            normalizer(node) {
                if (node.menus && !node.menus.length) {
                    delete node.menus
                }
                if (node.menuName == null){
                    node.menuName="请选择上级菜单"
                }
                return {
                    id: node.menuId,
                    label: node.menuName,
                    children: node.menus,
                    isDisabled: node.menuType != 'F' ? false : true
                }
            },

            // 表单取消按钮
            cancel() {
                this.dialogFormVisible = false;
                this.reset();
                this.showMenus()
            },

            // 表单重置
            reset() {
                this.form = {
                    menuId: "",
                    parentId: 0,
                    menuName: "",
                    icon: undefined,
                    menuType: "M",
                    orderNum: undefined,
                    isFrame: 1,
                    isCache: 0,
                    visible: "0",
                    status: "0"
                };
            },

            //表格选中后色块变化
            setCurrent(row) {
                this.$refs.singleTable.setCurrentRow(row);
            },
            handleCurrentChange(val) {
                this.currentRow = val;
            },

            //清空查询框数据
            cleanSearch(){
                this.queryParams.status='',       //搜索框菜单状态
                this.queryParams.menuName=''
            }

        },
        created() {
            this.showMenus();
        }
    }
</script>

<style scoped>
    /deep/.el-table th > .cell {
        text-align: center;

    }
    /deep/.el-table td > .cell {
        text-align: center;

    }




</style>


